<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
		  <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>

		<view v-show="!loadingone">
			<navbar name="百科"></navbar>
			<view class="tabsView" >
				<u-tabs bg-color="" font-size="30rpx" bar-width="80" active-color="#2EA7E0" :list="list" :is-scroll="true"
					:current="current" @change="change"></u-tabs>
			</view>
			<view class="wieww670">
				<block v-for="(item,idx) in recordsBk" :key="idx">
					<view class="weui-flex articleBody" @tap.stop="details(item,idx)">
						<view class="articleView">
							<view class="articleContent text-line">
								{{item.articleTitle}}
							</view>
							<view class="lockbody">
								<view class="lockView"></view>{{item.readNum}}
							</view>
						</view>
						<view class="articleImage">
							<u-lazy-load border-radius="10"  height="160" img-mode="aspectFill"
								:image="item.coverUrl"></u-lazy-load>
						</view>
					</view>
					<u-line v-show="idx !=articleList.length-1" class="u-line"></u-line>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"

import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"

	export default {
		components: {
			uLoading,
			uTabs,
			uLazyLoad,
			uLine,
		},
		data() {
			return {
				upPage:'',
				loadingone:false,
				id:'',//任务数据
				task:'',
				stepId:'',
				givePoint:'',//文章阅读数据
				recordsBk:[],//当前数组
				articleList:[],
				list: [],
				current: 0,
				sectionCurrent: 0,
				keyword: '',
				classifyId:0,//当前
				pageSize:6,//每页加载
				pageCurrent:1,//分页下标
			}
		},
		onLoad(e) {
			console.log(e)
			this.upPage = e.page?e.page:'';//上一页
			this.task = e.task?e.task:'';
			 this.stepId = e.stepId?e.stepId:'';
			 this.givePoint = e.givePoint?e.givePoint:''
			this.tabListBk(2)//门店端
		},
		onShow() {
			this.articleBk(this.classifyId,this.pageCurrent,this.pageSize,false)//获取百科
		},
		methods: {
			// 获取当前分类百科
			articleBk(classifyId, pageCurrent, pageSize,loay) {
				let _this = this;
				this.pageCurrent = pageCurrent;
				this.$cms.get(global.apiUrls.articleBk + '?classifyId=' + classifyId + '&pageCurrent=' + pageCurrent +
					'&pageSize=' + pageSize, {}).then(res => {
					// console.log(res)
					if(loay){
						let recordsBk = res.data.result.records;
						_this.recordsBk =_this.recordsBk.concat(recordsBk) //当前推荐百科
					}else{
						let recordsBk = res.data.result.records;
						_this.recordsBk = recordsBk//当前推荐百科
					}
				})
			},
			tabListBk(receiver){
				this.loadingone = true;
				let _this = this;
				this.$cms.get(global.apiUrls.tabListBk + '?receiver='+receiver, {}).then(res => {
					if(res.data.code == 1000){
						let result = res.data.result;
						result.unshift({
							classifyName:'推荐',
							classifyId:0
						})
						for(let i= 0; i<result.length;i++){
							result[i].name = result[i].classifyName
						}
						_this.list = result
						_this.loadingone = false;
					}
				})
			},
			details(item,idx){
				uni.navigateTo({
					url:'/pages/subpackage/find/articleDetails/details?id='+item.articleId+'&task'+this.task+'&stepId='+this.stepId+'&givePoint='+this.givePoint+'&page='+this.upPage
				})
			},
			searchValue(e) {
				console.log(e)
				if (e != '') {
					this.tabsShow = false
				} else {
					this.tabsShow = true
				}
			},
			change(index) {
				this.current = index;
				let list = this.list;
				let classifyId = list[index].classifyId;
				this.classifyId = classifyId;
				this.articleBk(classifyId,1,this.pageSize,false)//获取百科
			},
			onReachBottom : function() { //分页加载
			console.log('fen页加载')
			let pageCurrent = this.pageCurrent +=1,
			pageSize = this.pageSize;
				this.articleBk(this.classifyId,pageCurrent,pageSize,true)//获取百科
			},
		}
	}
</script>

<style>
	.tabsView{
		background: #F5F5F5;
	}
	.wieww670{
		width: 706upx;
		background: #FFFFFF;
		border-radius: 25upx;
		margin: 24upx auto 0;
	}
	.articleBody{
		padding: 30upx 26upx;
	}
	.articleContent{
		width: 440upx;
		height: 84upx;
		font-size: 30upx;
		font-weight: 500;
		color: #333333;
		line-height: 42upx;
	}
	.articleImage{
		width: 200upx;
		height: 160upx;
	}
	.lockbody{
		padding: 45upx 0 0;
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
		line-height: 37upx
	}
	.lockView{
		width: 50upx;
		height: 28upx;
		background: #C0C4CC;
		float: left;
		background: url(http://static.bsyjk.cn/seeIcon/37C6382B372045CCB803A7F2DE1D24EA.png)no-repeat;
		background-size: 44upx 28upx;
	}
</style>
